<template>
  <div class="warning-detail">
    <el-card shadow="never" class="detail-card">
      <template #header>
        <div class="card-header">
          <span>预警订单详情</span>
          <el-button @click="goBack" text>返回列表</el-button>
        </div>
      </template>

      <!-- 基本信息 -->
      <el-descriptions title="基本信息" :column="3" border>
        <el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ orderDetail.customerName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ orderDetail.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ orderDetail.productName }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ formatAmount(orderDetail.amount) }}</el-descriptions-item>
        <el-descriptions-item label="订单创建时间">{{ orderDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="预警类型">
          <el-tag :type="getWarningTypeStyle(orderDetail.warningType)">{{ formatWarningType(orderDetail.warningType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="业务员">{{ orderDetail.salesUser }}</el-descriptions-item>
        <el-descriptions-item label="处理状态">
          <el-tag :type="getStatusType(orderDetail.status)">{{ formatStatus(orderDetail.status) }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 预警信息 -->
      <el-descriptions title="预警信息" :column="2" border style="margin-top: 20px;">
        <el-descriptions-item label="预警时间">{{ orderDetail.warningTime }}</el-descriptions-item>
        <el-descriptions-item label="预警来源">系统自动预警</el-descriptions-item>
        <el-descriptions-item label="预警原因">{{ orderDetail.warningReason }}</el-descriptions-item>
        <el-descriptions-item label="预警规则">
          <span v-if="orderDetail.warningType === '1'">超过24小时未处理</span>
          <span v-else-if="orderDetail.warningType === '2'">客户资料异常</span>
          <span v-else-if="orderDetail.warningType === '3'">金额超过阈值</span>
          <span v-else>其他预警</span>
        </el-descriptions-item>
        <el-descriptions-item label="风险等级">
          <el-tag :type="orderDetail.warningType === '1' ? 'warning' : orderDetail.warningType === '2' ? 'danger' : 'danger'">
            {{ orderDetail.warningType === '1' ? '中' : orderDetail.warningType === '2' ? '高' : '特高' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预警次数">{{ orderDetail.warningCount || 1 }}</el-descriptions-item>
      </el-descriptions>

      <!-- 处理信息 -->
      <el-descriptions v-if="orderDetail.status !== '0'" title="处理信息" :column="2" border style="margin-top: 20px;">
        <el-descriptions-item label="受理时间">{{ orderDetail.handleTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="受理人员">{{ orderDetail.handler || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理记录">{{ orderDetail.handleRecord || '正在处理中' }}</el-descriptions-item>
        <el-descriptions-item label="处理方式">{{ orderDetail.handleMethod || '人工核查' }}</el-descriptions-item>
        <el-descriptions-item v-if="orderDetail.status === '2'" label="完成时间">{{ orderDetail.finishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="orderDetail.status === '2'" label="处理结果">{{ orderDetail.result || '已解决' }}</el-descriptions-item>
      </el-descriptions>

      <!-- 操作区域 -->
      <div class="operation-area" v-if="orderDetail.status === '0'">
        <el-button type="primary" @click="handleOrderWarning">立即处理</el-button>
      </div>
      <div class="operation-area" v-else-if="orderDetail.status === '1'">
        <el-button type="success" @click="completeOrderWarning">完成处理</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const route = useRoute();
const router = useRouter();

// 定义订单详情接口
interface OrderDetailType {
  id: string;
  orderNo: string;
  customerName: string;
  customerPhone: string;
  productName: string;
  amount: number;
  createTime: string;
  status: string;
  salesUser: string;
  warningType: string;
  warningReason: string;
  warningTime: string;
  warningCount: number;
  handleTime?: string;
  handler?: string;
  handleRecord?: string;
  handleMethod?: string;
  finishTime?: string;
  result?: string;
}

// 订单详情
const orderDetail = ref<OrderDetailType>({
  id: '',
  orderNo: '',
  customerName: '',
  customerPhone: '',
  productName: '',
  amount: 0,
  createTime: '',
  status: '0',
  salesUser: '',
  warningType: '1',
  warningReason: '',
  warningTime: '',
  warningCount: 1
});

// 初始化数据
onMounted(() => {
  const id = route.params.id;
  if (id) {
    fetchOrderDetail(id as string);
  }
});

// 获取订单详情
const fetchOrderDetail = (id: string) => {
  // 模拟从服务器获取数据
  setTimeout(() => {
    // 模拟预警订单数据
    const mockData: OrderDetailType = {
      id: id,
      orderNo: 'WO20240501001',
      customerName: '张三',
      customerPhone: '13812345678',
      productName: '企业经营贷',
      amount: 500000,
      createTime: '2024-05-01 10:25:36',
      status: '0',
      salesUser: '李业务',
      warningType: '1',
      warningReason: '订单已超过处理时限',
      warningTime: '2024-05-02 15:30:45',
      warningCount: 1
    };

    // 如果是第二个订单，修改状态为处理中
    if (id === '2') {
      mockData.status = '1';
      mockData.handleTime = '2024-05-03 09:50:20';
      mockData.handler = '王处理';
      mockData.handleRecord = '正在核查客户提交的资料';
      mockData.handleMethod = '人工核查';
    }
    
    // 如果是第三个订单，修改状态为已处理
    if (id === '3') {
      mockData.status = '2';
      mockData.handleTime = '2024-05-04 11:30:10';
      mockData.handler = '赵处理';
      mockData.handleRecord = '已联系客户确认信息';
      mockData.handleMethod = '人工核查';
      mockData.finishTime = '2024-05-04 16:45:30';
      mockData.result = '已确认并处理完成';
    }

    orderDetail.value = mockData;
  }, 300);
};

// 返回列表
const goBack = () => {
  router.push('/order-warning/list');
};

// 格式化金额
const formatAmount = (amount: number) => {
  return amount ? `¥${amount.toLocaleString()}` : '-';
};

// 格式化状态
const formatStatus = (status: string) => {
  switch (status) {
    case '0':
      return '待处理';
    case '1':
      return '处理中';
    case '2':
      return '已处理';
    default:
      return '未知状态';
  }
};

// 获取状态样式
const getStatusType = (status: string) => {
  switch (status) {
    case '0':
      return 'info';
    case '1':
      return 'warning';
    case '2':
      return 'success';
    default:
      return 'info';
  }
};

// 格式化预警类型
const formatWarningType = (type: string) => {
  switch (type) {
    case '1':
      return '超时预警';
    case '2':
      return '异常预警';
    case '3':
      return '金额预警';
    default:
      return '未知类型';
  }
};

// 获取预警类型样式
const getWarningTypeStyle = (type: string) => {
  switch (type) {
    case '1':
      return 'warning';
    case '2':
      return 'danger';
    case '3':
      return 'danger';
    default:
      return 'info';
  }
};

// 处理预警订单
const handleOrderWarning = () => {
  ElMessageBox.confirm(
    `确定要处理该预警订单吗？<br>订单号: ${orderDetail.value.orderNo}`,
    '处理确认',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 更新状态为处理中
    orderDetail.value.status = '1';
    
    // 添加处理记录
    const now = new Date();
    const handleTime = now.toLocaleString();
    orderDetail.value.handleTime = handleTime;
    orderDetail.value.handler = '当前用户';
    orderDetail.value.handleRecord = '开始处理预警订单';
    orderDetail.value.handleMethod = '人工核查';
    
    ElMessage({
      type: 'success',
      message: '已开始处理预警订单'
    });
  });
};

// 完成处理
const completeOrderWarning = () => {
  ElMessageBox.confirm(
    `确定完成处理该预警订单吗？<br>订单号: ${orderDetail.value.orderNo}`,
    '完成确认',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }
  ).then(() => {
    // 更新状态为已处理
    orderDetail.value.status = '2';
    
    // 添加完成记录
    const now = new Date();
    const finishTime = now.toLocaleString();
    orderDetail.value.finishTime = finishTime;
    orderDetail.value.result = '已确认并处理完成';
    
    ElMessage({
      type: 'success',
      message: '预警订单处理已完成'
    });
  });
};
</script>

<style scoped>
.warning-detail .detail-card {
  margin-bottom: 20px;
}

.warning-detail .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warning-detail .operation-area {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>